<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all"/>
    <link rel="stylesheet" href="/layuiadmin/style/live_chat.css" media="all"/>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title layui_tab_title">
                <li class=""><a href="{:url('live/dashboard')}">直播视频监控</a></li>
                <li class="layui-this"><a href="{:url('chat/live_chat')}">直播间聊天监控</a></li>
            </ul>
        </div>

        <div class="layui-card-body">
            <div class="layui-row layui-col-space10" id="liveChatArea">
                {empty name="lives"}
                <div class="layui-none" style="text-align: center;min-height: 300px">未查询到相关数据</div>
                {else /}
                {volist name='lives' id='live'}
                <div class="layui-col-md3">
                    <div class="layui-card live_chat_info">
                        <div class="room_user">{$live.anchor.nick_name|default=''}({$live.anchor.id|default=''})的直播间</div>
                        <ul class="chat_list chatList" id="chatLog{$i}" data-anchor="{$live.anchor.id|default=''}" data-chatkey="{$i}">
                            <li class="chat_loading"><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i></li>
                        </ul>
                    </div>
                </div>
                {/volist}
                {/empty}
            </div>

            {notempty  name="lives"}
            <div id="pager" style="margin-top: 20px;margin-left: 20px;"></div>
            {/notempty}
        </div>

    </div>
</div>

{include file='index/common' /}

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/assets/ue/third-party/jquery-1.10.2.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'admin', 'laypage'], function () {
        var admin = layui.admin;
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pager'
            , curr: {$page}
            , count: {$count}
            , limit: {$limit}
            , layout: ['prev', 'page', 'next', 'skip', 'count']
            , jump: function (obj, first) {
                if (!first) {
                    window.location.href = '{:url("chat/live_chat")}?page=' + obj.curr;
                }
            }
        });


        /**
         * 日志列表获取
         * @param room_id 房间/主播id
         * @param chat_id 聊天日志id
         * @param chat_key 页面data-chatkey值
         */
        function getLiveChat(room_id, chat_id, chat_key) {
            $.ajax({
                url: '{:url("chat/get_live_chat")}',
                type: 'get',
                data: {room_id: room_id, chat_id: chat_id},
                dataType: 'json',
                success: function (res) {
                    var chat_data = res.data;
                    if (chat_data.length > 0) {
                        var html = '';
                        $.each(chat_data, function (i, val) {
                            html += `<li data-id="${val.id}">`;
                            var content = val.content;
                            if (val.mgrid == 0) {
                                html += `<span><i>${val.mgrname}</i>:</span>`;
                                content = '【' + val.nick_name + '】已被禁言，聊天内容：' + val.content;
                            } else if (val.mgrid > 0) {
                                html += `<span><i>房管</i>${val.mgrname}:</span>`
                                content = '【' + val.nick_name + '】已被禁言，聊天内容：' + val.content;
                            } else {
                                html += `<span>${val.nick_name}:</span>`
                            }

                            html += `<em class="${val.status == 1 ? '' : 'red'}">${content}</em>`
                            html += `</li>`

                        });
                        $('#chatLog' + chat_key).find('.chat_loading').remove();
                        $('#chatLog' + chat_key).prepend(html);
                    } else {
                        var li_len = $('#chatLog' + chat_key).find('li:not(.chat_loading)').length;
                        if (li_len <= 0) {
                            $('#chatLog' + chat_key).find('.chat_loading').html('暂无聊天内容');
                        }
                    }
                },
            });
        }

        function liveChatOperation() {
            var chat_list_len = $('#liveChatArea .chatList').length;
            for (var i = 1; i <= chat_list_len; i++) {
                // dom对象节点
                var chat_list_obj = $('#chatLog' + i);
                // 页面上序号
                var chatkey = chat_list_obj.data('chatkey');
                // 直播/房间id
                var anchor = chat_list_obj.data('anchor');
                // 聊天数据id号
                var this_id = chat_list_obj.find('li:first-child').data('id');

                if (this_id == 0) {
                    getLiveChat(anchor, 0, chatkey);
                } else {
                    getLiveChat(anchor, this_id, chatkey);
                }
            }
        }

        liveChatOperation();

        // 5秒更新一次聊天
        setInterval(function () {
            liveChatOperation();
        }, 5000);

    });


</script>
</body>
</html>
